<template>
  <div class="mr-5 flex items-center">
    <n-dropdown :options="options" @select="handleSelect" class="min-w-40">
      <n-button text> {{ myLanguage }} </n-button>
    </n-dropdown>
  </div>
</template>

<script setup lang="ts">
import type { Component } from "vue";
import { useLanguage } from "@/store/modules/language.ts";
import { storage } from "@/utils/storage";
import { useI18n } from "vue-i18n";
const i18n = useI18n();
const languageStore = useLanguage();
let myLanguage = computed(() => languageStore.getLanguage);
const options = languageStore.LanguageList;

function handleSelect(key: string) {
  languageStore.setLanguage(key);
  i18n.locale.value = key;
}
</script>
